import React, { Component } from 'react'

class Box extends Component{
    shouldComponentUpdate(nextProps){
        if(this.props.current===this.props.index || nextProps.current===nextProps.index){
            return true
        }

        return false
    }
    render(){
       return (<div style={{backgroundColor:this.props.current ===this.props.index ? "pink": "black",width:"100px",height:"50px",border:this.props.current ===this.props.index ? '1px solid red' : '2px solid pink',margin:'10px',float:'left'}}>

        </div>)
    }
}
export default class App extends Component {
    state={
        list:['0','1','2','3','4','5','6'],
        current:0
    }
  render() {
    return (
      <div>
         <input type="number" onChange={(evt)=>{
                    console.log(evt.target.value)
                    this.setState({
                        current:Number(evt.target.value)
                    })
                }} value={this.state.current}/>

                <div style={{overflow:"hidden"}}>
                    {
                        this.state.list.map((item,index)=>
                            <Box key={item} current={this.state.current} index={index}/>    
                        )
                    }
                </div>
      </div>
    )
  }
}
